<template>
  <div>
    <div>{{ content }}---</div>
    <el-button @click="insertStr">插入字符</el-button>
    <el-card title="代码编辑器">
      <editor
        ref="aceEditor"
        v-model="content"
        @init="editorInit"
        width="100%"
        height="400px"
        lang="json"
        theme="dracula"
        :options="{
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
          tabSize: 6,
          fontSize: 14,
          readOnly: false, //设置是否只读
          showPrintMargin: false, //去除编辑器里的竖线
        }"
      ></editor>
    </el-card>
  </div>
</template>
<script>
export default {
  components: {
    editor: require("vue2-ace-editor"),
  },
  data() {
    return {
      listTheme: [
        "dracula",
        "chrome",
        "chaos",
        "clouds",
        "clouds_midnight",
        "xcode",
        "monokai",
        "ambiance",
        "dreamweaver",
        "eclipse",
        "github",
        "idle_fingers",
      ],
      listCodeLang: [
        "json",
        "yaml",
        "xml",
        "java",
        "text",
        "javascript",
        "scheme",
        "lua",
        "mysql",
        "perl",
        "powershell",
        "python",
        "ruby",
        "sql",
        "hjson",
        "ini",
      ],
      content: "",
      theme: "",
    };
  },
  // mounted() {
  //   // 初始化编辑器
  //   this.editorInit();
  // },
  methods: {
    insertStr() {
      const str = "sssss";
      const editor = this.$refs.aceEditor.editor;
      const pt = editor.getCursorPosition();
      editor.session.insert(pt, str);
    },
    editorInit() {
      console.log(111)
      // 初始化
      require("brace/ext/language_tools");
      require("brace/ext/beautify");
      require("brace/ext/error_marker");
      require("brace/ext/searchbox");
      require("brace/ext/split");
      // 循坏加载语言，通过点击按钮切换
      for (let s = 0; s < this.listCodeLang.length; s++) {
        require("brace/snippets/" + this.listCodeLang[s]);
      }
      for (let j = 0; j < this.listCodeLang.length; j++) {
        require("brace/mode/" + this.listCodeLang[j]);
      }
      // 循坏加载主题，通过点击按钮切换
      for (let i = 0; i < this.listTheme.length; i++) {
        require("brace/theme/" + this.listTheme[i]);
      }
      this.$refs.aceEditor.editor.on('focus', function() {
        console.log('编辑器获得了焦点');
      });
    },
  },
};
</script>
<style></style>
